import React, {useEffect, useState} from 'react';
import { Button} from 'antd-mobile'
import { history} from 'umi'
import testPaper from '@/assets/images/test-paper.png'
import { queryQuestionRecord,queryExamRecord} from '@/services/edu'
import style from './index.less'

function Score() {
  const { query = {} } = history.location as any;
  const { id,isExam } = query;
  const [data,setData]=useState<any>({})
  useEffect(()=>{
    init()
  },[])
  const init = async()=>{
    let res:any ={}
    if(isExam){
      res=await queryExamRecord({recordId:id})
    }else{
      res=await queryQuestionRecord({recordId:id})
    }

    if(res?.code===1){
      setData(res.response)
    }
  }
  const renderCorrect =()=>{
    const questionCorrect = Number(data.questionCorrect||0);
    const questionCount = Number(data.recordSum||0);
    return Math.floor(questionCorrect/questionCount*10000)/100
  }
  const ratio =renderCorrect()
  const getWrongIds =()=>{
    history.push(`/history/analysis?id=${data.id}`)
  }
  return (
    <div className={style.score}>
      <div className={style.test_paper}>
          <img alt="" src={testPaper} className={testPaper.test_paper_img} />
        </div>
      <div className={style.body}>
        <div className={style.title}>答题完成</div>
        <div className={style.tip}>正确率 <span className={`${data.correctPercent>60?'text-success':'text-error'}`}>{data.correctPercent||'0'}%</span></div>
        <div className={style.row}>
          <div onClick={getWrongIds}>
            答对 {data.questionCorrect||'0'}题
          </div>
          <div onClick={getWrongIds}>
            答错 {(data.recordSum||0)-(data.questionCorrect||0)}题
          </div>
        </div>
        <Button onClick={()=>history.push('/home')} type="primary">回到首页</Button>
      </div>
    </div>
  );
}

export default Score;
